<template>
    <div style="margin-left: auto;">
        <h1>销售订单</h1>
    </div>

    <div class="app-container">
        <!-- 按钮 -->
        <el-card>
            <el-button v-print="'#printTest'">打印</el-button>
        </el-card>
    </div>
    <!-- 申请表单数据 -->
    <div class="hidden">
    </div>
    <el-scrollbar style="height: 320px;color: dimgray">
        <div class="scrollbar-flex-content">
            <p class="scrollbar-demo-item">
                <el-form :inline="true" :model="form" class="demo-form-inline" id="printTest">
                    <el-form-item label="单据编码：" style="width: 308px">
                        <el-input v-model="form.documentNumber" disabled="true" />
                    </el-form-item>
                    <el-form-item label="单据日期：" style="width: 308px">
                        <el-date-picker v-model="form.documentDate" type="date" disabled="true" />
                    </el-form-item>
                    <el-form-item label="单据状态：" style="width: 308px">
                        <el-select v-model="form.documentStatus" disabled="true">
                            <el-option label="开立" value="开立" />
                            <el-option label="审核" value="审核" />
                            <el-option label="返回" value="返回" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据类型：" style="width: 308px">
                        <el-select v-model="form.documentType" disabled="true">
                            <el-option label="业务订单" value="业务订单" />
                            <el-option label="其他订单" value="其他订单" />
                        </el-select>
                    </el-form-item>
                </el-form>


                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="业务类型：" style="width: 308px">
                        <el-select v-model="form.businessType" disabled="true">
                            <el-option label="销售订单" value="销售订单" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务状态：" style="width: 308px">
                        <el-select v-model="form.businessStatus" disabled="true">
                            <el-option label="正常" value="正常" />
                            <el-option label="挂机" value="挂机" />
                            <el-option label="手工关闭" value="手工关闭" />
                            <el-option label="系统关闭" value="系统关闭" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销售部门：" style="width: 308px">
                        <el-select v-model="form.salesDepartmentName" disabled="true">
                            <el-option label="总经办" value="1" />
                            <el-option label="市场部" value="2" />
                            <el-option label="采购部" value="3" />
                            <el-option label="销售部" value="4" />
                            <el-option label="生产运营中心" value="5" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="销售人员：" style="width: 308px">
                        <el-select v-model="form.salesStaff" disabled="true">
                            <el-option label="赵多和" value="赵多和" />
                            <el-option label="姜楠" value="姜楠" />
                        </el-select>
                    </el-form-item>
                </el-form>


                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="操作员：" style="width: 308px">
                        <el-input v-model="form.operatorName" disabled="true" />
                    </el-form-item>
                    <el-form-item label="销售类型：" style="width: 308px">
                        <el-select v-model="form.salesType" disabled="true">
                            <el-option label="国内品牌" value="国内品牌" />
                            <el-option label="外购成品" value="外购成品" />
                            <el-option label="外购原料" value="外购原料" />
                            <el-option label="自接订单" value="自接订单" />
                            <el-option label="自制销售" value="自制销售" />
                            <el-option label="客供销售" value="客供销售" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供货方式：" style="width: 308px">
                        <el-select v-model="form.modeDelivery" disabled="true">
                            <el-option label="计划生产" value="计划生产" />
                            <el-option label="库存供应" value="库存供应" />
                        </el-select>
                    </el-form-item>
                </el-form>


                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="客户名称：" style="width: 308px">
                        <el-input v-model="form.customerProfileName" disabled="true" />
                    </el-form-item><el-link type="primary" @click="form1.dialogTableVisible = true">选择</el-link>

                    <el-form-item label="合同号：" style="width: 308px">
                        <el-input v-model="form.contractNumber" disabled="true" />
                    </el-form-item>
                    <el-form-item label="付款条件：" style="width: 308px">
                        <el-input v-model="form.paymentTerms" disabled="true" />
                    </el-form-item>
                    <el-form-item label="交付日期：" style="width: 308px">
                        <el-date-picker v-model="form.deliverDate" type="date" disabled="true" />
                    </el-form-item>
                    <el-form-item label="交期状态：" style="width: 308px">
                        <el-radio-group v-model="form.deliveryStatus" disabled="true">
                            <el-radio :value="form.deliveryStatus" size="large">预计</el-radio>
                            <el-radio :value="form.deliveryStatus" size="large">确认</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>


                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="收货人：" style="width: 308px">
                        <el-input v-model="form.consignee" disabled="true" />
                    </el-form-item>
                    <el-form-item label="电话：" style="width: 308px">
                        <el-input v-model="form.phone" disabled="true" />
                    </el-form-item>
                    <el-form-item label="地址：" style="width: 308px">
                        <el-input v-model="form.address" disabled="true" />
                    </el-form-item>
                    <el-form-item label="目的国家：" style="width: 308px">
                        <el-input v-model="form.destinationCountry" disabled="true" />
                    </el-form-item>
                    <el-form-item label="备注信息：" style="width: 308px">
                        <el-input v-model="form.noteInformation" disabled="true" style="width: 240px" :rows="2"
                            type="textarea" />
                    </el-form-item>
                </el-form>

                
            </p>
        </div>
    </el-scrollbar>
    <table style="border-collapse:collapse">
        <tr>
            <td>序号</td>
            <td>物料编码</td>
            <td>物料名称</td>
            <td>型号规格</td>
            <td>主计量</td>
            <td>数量</td>
            <td>单价</td>
            <td>金额</td>
            <td>件数</td>
            <td>质量要求</td>
            <td>包装要求</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>
                {{ form.salesOrderMaterialId }}
            </td>
            <td>
                {{ form.itemBianma }}
            </td>
            <td>
                {{ form.materialName }}
            </td>
            <td>
                {{ form.typeSpecification }}
                <br>
                <el-select v-model="form.color" placeholder="请选择" disabled="true" style="width: 100px">
                    <el-option lable="白色" value="白色"></el-option>
                    <el-option lable="黑色" value="黑色"></el-option>
                    <el-option lable="红色" value="白色"></el-option>
                    <el-option lable="黄色" value="黄色"></el-option>
                    <el-option lable="蓝色" value="蓝色"></el-option>
                </el-select>
            </td>
            <td>
                <el-select v-model="form.documentType" disabled="true" placeholder="请选择" style="width: 100px">
                    <el-option lable="台" value="台"></el-option>
                    <el-option lable="件" value="件"></el-option>
                    <el-option lable="个" value="个"></el-option>
                    <el-option lable="盒" value="盒"></el-option>
                </el-select>
            </td>
            <td>
                <el-input v-model="form.quantity" disabled="true" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="form.unitPrice" disabled="true" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="form.amount" disabled="true" style="width: 100px">

                </el-input>

            </td>
            <td>
                <el-input v-model="form.numberofpackages" disabled="true" aria-placeholder="件数" style="width: 100px">
                </el-input>
                <br>
                <el-select v-model="form.pattern" style="width: 100px">
                    <el-option lable="箱" value="台"></el-option>
                    <el-option lable="桶" value="桶"></el-option>
                    <el-option lable="袋" value="袋"></el-option>
                </el-select>
            </td>
            <td>
                <el-input v-model="form.quality" disabled="true" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="form.packing" disabled="true" style="width: 100px">
                </el-input>
            </td>
            <td>
                <el-input v-model="form.remark" disabled="true" style="width: 100px">
                </el-input>
            </td>
        </tr>
    </table>

    <hr>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import Cookie from 'cookies-ts'
import axios from 'axios'
import { number } from 'echarts'
const apiurls = import.meta.env.VITE_APP_API_URL_SalesManagementCommon;
const route = useRoute()

const form1 = reactive({
    dialogTableVisible: false,
    dialogTableVisible111: false,
})

const form = reactive({
    "documentNumber": "",
    "documentDate": "",
    "documentStatus": "",
    "documentType": "",
    "businessType": "",
    "businessStatus": "",
    "salesDepartmentName": "",
    "salesStaff": "",
    "operatorName": "",
    "salesType": "",
    "modeDelivery": "",
    "customerProfileName": "",
    "contractNumber": "",
    "paymentTerms": "",
    "deliverDate": "",
    "deliveryStatus": "",
    "consignee": "",
    "phone": "",
    "address": "",
    "destinationCountry": "",
    "noteInformation": "",
    "itemBianma": "",
    "salesOrderMaterialId": "",
    "materialName": "",
    "typeSpecification": "",
    "color": "",
    "quantity": "",
    "unitPrice": "",
    "amount": "",
    "numberofpackages": "",
    "pattern": "",
    "quality": "",
    "packing": "",
    "remark": ""
})


const GetIntail = () => {
    axios.get(apiurls+'/api/SalesOrder/SearchSalesOrderDetail', {
        params: {
            documentNumber: route.query.documentNumber,
            itemName: '',
            salesStaff: '',
            customerProfileName: '',
            salesType: '',
            pageIndex: 1,
            pageSize: 10,
        }
    }).then((res) => {
        form.documentNumber = res.data.data.list[0].documentNumber
        form.documentDate = res.data.data.list[0].documentDate
        form.documentStatus = res.data.data.list[0].documentStatus
        form.documentType = res.data.data.list[0].documentType
        form.businessType = res.data.data.list[0].businessType
        form.businessStatus = res.data.data.list[0].businessStatus
        form.salesDepartmentName = res.data.data.list[0].salesDepartmentName
        form.salesStaff = res.data.data.list[0].salesStaff
        form.operatorName = res.data.data.list[0].operatorName
        form.salesType = res.data.data.list[0].salesType
        form.modeDelivery = res.data.data.list[0].modeDelivery
        form.customerProfileName = res.data.data.list[0].customerProfileName
        form.contractNumber = res.data.data.list[0].contractNumber
        form.paymentTerms = res.data.data.list[0].paymentTerms
        form.deliverDate = res.data.data.list[0].deliverDate
        form.deliveryStatus = res.data.data.list[0].deliveryStatus
        form.consignee = res.data.data.list[0].consignee
        form.phone = res.data.data.list[0].phone
        form.address = res.data.data.list[0].address
        form.destinationCountry = res.data.data.list[0].destinationCountry
        form.noteInformation = res.data.data.list[0].noteInformation
        form.itemBianma = res.data.data.list[0].itemBianma
        form.salesOrderMaterialId = res.data.data.list[0].salesOrderMaterialId
        form.materialName = res.data.data.list[0].materialName
        form.typeSpecification = res.data.data.list[0].typeSpecification
        form.color = res.data.data.list[0].color
        form.quantity = res.data.data.list[0].quantity
        form.unitPrice = res.data.data.list[0].unitPrice
        form.amount = res.data.data.list[0].amount
        form.numberofpackages = res.data.data.list[0].numberofpackages
        form.pattern = res.data.data.list[0].pattern
        form.quality = res.data.data.list[0].quality
        form.packing = res.data.data.list[0].packing
        form.remark = res.data.data.list[0].remark
    })
}
onMounted(() => {
    GetIntail()
})
</script>

<style scoped>
.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1800px;
    height: 300px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
}
</style>
<style>
#printMe {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.borderForm {
    border: 1px solid #ccc;
    padding: 10px;
    /* 可选，用于增加表单与边框之间的间距 */
}

@page {
    size: auto;
    margin: 0mm;
}
</style>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

/* 设置第一行的 td 顶部边框加粗并设置为红色 */
table tr:first-child td {
    border-top: 1px solid #ccc;
    /* 设置顶部边框为3px宽度的红色 */
    padding: 10px;
    text-align: center;
}

/* 设置 td 的样式 */

table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;
    height: 60px;
    width: 150px;
    white-space: nowrap;
    /* 防止内容换行 */
}

/* 可选：为 table 添加样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/*______________________________________________________*/

.table-container {
    max-width: 100%;
    overflow-x: auto;
    /* 启用水平滚动 */
    margin: 20px 0;
    /* 设置容器的外边距 */
}

/* :deep(.el-input__wrapper) {
    box-shadow: none;
    text-align: center;
}

:deep(.el-select__wrapper) {
    box-shadow: none;
}

::v-deep(.center-input .el-input__inner) {
    text-align: center;
} */
</style>